<template>
    <div>
        <Upload
            multiple
            type="drag"
            name="avatar"
            action="http://localhost:3000/upload/uploads">
            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击或将文件拖拽到这里上传</p>
            </div>
        </Upload>
        <!-- <Modal title="查看图片" v-model="visible">
            <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
        </Modal> -->
        
            
        <div>
            <Input v-model="filter.originalname">
                <Button slot="append" icon="ios-search" @click="search"></Button>
            </Input>
            <Table border :columns="columns1" :data="list" style="margin-top:10px;" @on-selection-change="getIds"></Table>
            <Page :total="filter.total" size="small" show-total show-elevator show-sizer :page-size="2" :page-size-opts="[2,4,6,8]" @on-change="changePage" @on-page-size-change="changePageSize" style="margin-top:15px;"></Page>
        </div>
        
        
    </div>    
</template>

<script>
    import Base from '../../common/Base.js'
    export default {
        mixins:[Base],
        data(){
            return{
                module:'upload',
                columns1: [
                    {
                        title: '图片名',
                        key: 'originalname'                        
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 200,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        icon: 'eye'
                                    },
                                    on: {
                                        click: () => { 
                                            //console.log(params);
                                            this.show(params.index)
                                        }
                                    }     
                                }, '查看'),
                                
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'large',
                                        icon: 'trash-a'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleData(params.row._id);
                                        }
                                    }
                                }, '删除')
                                
                            ]);
                        }
                    }
                ],
                formValidate: {
                    originalname:null,
                    path:null                    
                },

            }
        },
        methods:{
            show(index){
                this.$Modal.info({
                    title: '图片',
                    content: `path：${this.list[index].path}<br>`
                })
            },
            ok () {             
                this.$Message.info('点击了确定');

            },
            cancel () {
                this.$Message.info('点击了取消');
            }
        }
    }
</script>

<style>
    
</style>